<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
<!--        基于select的change事件，监听下拉选的内容是否改变-->
<!--        <select name="pro" v-model="proVal" @change="changePro">-->
<!--            <option value="-1">&#45;&#45;请选择&#45;&#45;</option>-->
<!--            <option value="0">江西省</option>-->
<!--            <option value="1">浙江省</option>-->
<!--            <option value="2">江苏省</option>-->
<!--        </select>-->

<!--        基于vue的监听属性，监听下拉选选项的改变-->
        <select name="pro" v-model="proVal">
            <option value="-1">--请选择--</option>
            <option value="0">江西省</option>
            <option value="1">浙江省</option>
            <option value="2">江苏省</option>
        </select>

        <select name="cities">
            <option value="-1">--请选择--</option>
            <option v-for="city in cities">{{city}}</option>
        </select>
    </div>

</body>
<script>
    let pros = [
        ["南昌市","九江市","上饶市"],
        ["杭州市","温州市","台州市","丽水市"],
        ["南京市","苏州市","无锡市"]
    ]

    new Vue({
        el:"#app",
        data:{
            proVal:-1,
            cities:[]
        },
        methods:{
            changePro(){
                let cities = pros[this.proVal];
                this.cities = cities;
            }
        },
        watch:{
            //监听属性:监听函数   --- 当监听属性的值发生变化后，监听函数会执行
            proVal:function(newVal,oldVal){
                //alert("newVal="+newVal + ",oldVal="+oldVal)
                let cities = pros[newVal];
                this.cities = cities;
            }
        }
    });
</script>
</html>